<template>
    <div class="footerBar">
        <van-tabbar v-model="active" route :safe-area-inset-bottom="true">
            <van-tabbar-item replace
                             to="/home"
            >
                <template #icon>
                    <span class="iconfont">&#xe60f;</span>
                </template>
                首页</van-tabbar-item>
            <van-tabbar-item replace
                             to="/myorder"
            >
                <template #icon>
                    <span class="iconfont">&#xe617;</span>
                </template>
                我的订单</van-tabbar-item>
            <van-tabbar-item replace
                             to="/user"
            >
                <template #icon>
                    <span class="iconfont">&#xe60e;</span>
                </template>
                个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<style scoped>
    .footerBar{
        width: 100%;
        height: 50px;
    }
    .iconfont{
        font-size: 25px;
    }
    .van-tabbar-item--active{
        color: #0fa1a0;
    }
    .van-icon-wap-home-o:before,.van-icon-orders-o:before,.van-icon-contact:before{
        font-size: 25px;
    }
    .van-icon{
        font-size: 25px;
    }
    .van-tabbar-item{
        font-size: 11px;
    }
    /deep/.van-icon, .van-icon::before{
        font-size: 24px;
    }
</style>
<script>
    import { Tabbar, TabbarItem } from 'vant';
    export default {
        data() {
            return {
                active: 0
            }
        },
        components:{
            [Tabbar.name]:Tabbar,
            [TabbarItem.name]:TabbarItem
        },
        methods:{
        }
    }
</script>